<template>
    <ph-button shape="square" class="ph-btn-datetime" :icon="type=='time'?'clock-o':'calendar'" @click="onClick" ref="datetimeBtn"></ph-button>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance, PropType, ref } from 'vue'
import PhButton from './button.vue'
export default defineComponent({
    components:{PhButton},
    props:{
        double:{type:Boolean},
        format:{type:String},
        type:{type:String,default:"datetime"/*date*/},
        value:{type:String},
        start:{type:String},
        end:{type:String},
        min:{type:String},
        max:{type:String},
        theme:{type:String},
        weekText:{
            type:Array as PropType<Array<string>>
        },
        importants:{
            type:Array as PropType<Array<{title:string|number,md:string,desc:string}>>
        },
        clear:{
            type:Boolean,
            default:true,
        },
        now:{
            type:Boolean,
            default:true,
        }
    },
    setup(props,{emit}) {
        const instance = getCurrentInstance() as any
        const datetimeBtn = ref<{$el:HTMLElement}|null>(null)
        const onClick = ()=>{
            const t = datetimeBtn.value?.$el
            if(!t)return
            let {left,top,height} = t.getBoundingClientRect()
            if(t.parentElement&&t.parentElement.dataset.ph==="datetime-picker"){
                const rect = t.parentElement.getBoundingClientRect()
                left = rect.left
                top = rect.top
                height = rect.height
            }
            const opt = {
                left,
                top,
                height,
                mode:props.type,
                format:props.format,
                min:props.min,
                max:props.max,
                theme:props.theme,
                importants:props.importants,
                weekText:props.weekText,
                now:props.now,
                clear:props.clear
            }
            let dtp =props.double?(instance?.proxy?.$phDDatetimePicker(props.start,props.end,opt)):(instance?.proxy?.$phDatetimePicker(props.value,opt));
            dtp.done((v:unknown)=>{
                if(v)
                emit("pick",v)
                else
                emit("clear")
            })
        }
        return {datetimeBtn,onClick}
    },
})
</script>
<style lang="scss">
.ph-btn-datetime{
    background-color: var(--ph-light-l1);
    &:hover{
        background-color: var(--ph-light-d1);
    }
    .ph-icon{
        color: var(--ph-c);
    }
}
</style>
